<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/classteacher/bootstrap/bootstrap_3.3.7_min.css">
    <link rel="stylesheet" href="/classteacher/bootstrap/bootstrap-datetimepicker_4.17.47.css">
    <script src="/classteacher/js/jquery_2.1.1.js"></script>
    <script src="/classteacher/js/bootstrap_3.3.7_js.js"></script>
    <script src="/classteacher/bootstrap/moment.js_2.24.0.js"></script>
    <script src="/classteacher/bootstrap/bootstrap-datetimepicker_4.17.47_js.min.js"></script>
    <script src="/classteacher/layui/layer/layer.js"></script>
    <script src="/classteacher/vue/Vue.js"></script>
    <script src="/classteacher/Vue/axios.js"></script>
</head>
<style>
    body {
        background-color: rgba(192, 192, 192, 0.3);
    }
</style>
<body>
<div class="container-fluid">
    <div class="modal-content" id="paperList">
        <div class="modal-header">
            <h4 class="modal-title" id="addBankModalLabel">查询条件：</h4>
        </div>
        <div class="modal-body">
            <div class="input-group">
                <div class="form-group" style="float:left;display:flex;width:100%">
                    <input class="form-control" type="text" placeholder="名称">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" placeholder="出题时间"/>
                        <span class="input-group-addon">
                                <span class="glyphicon">日期</span>
                            </span>
                    </div>
                </div>
                <div class="form-group" style="float:left;display:flex;width:100%">
                    <input class="form-control" type="text" placeholder="出题人">
                    <input class="form-control" type="text" placeholder="知识点">
                    <input class="form-control" type="text" placeholder="学期">
                    <select class="form-control" v-model="subject">
                        <option value="1">语文</option>
                        <option value="2">数学</option>
                        <option value="3">英语</option>
                        <option value="4">物理</option>
                        <option value="5">化学</option>
                        <option value="6">生物</option>
                        <option value="7">政治</option>
                        <option value="8">历史</option>
                        <option value="9">地理</option>
                    </select>
                    <input type="button" value="查询" @click="listPapers()">
                </div>
                <div class="table-responsive" style="float:left;display:flex;width:100%">
                    <table class="table table-hover">
                        <caption>试卷列表:</caption>
                        <thead>
                        <tr>
                            <th style="width: 5%">ID</th>
                            <th style="width: 40%">名称</th>
                            <th style="width: 10%">出题人</th>
                            <th>出题时间</th>
                            <th style="width: 10%">知识点</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="value in listPaper">
                            <td>{{value.paperId}}</td>
                            <td>{{value.paperName}}</td>
                            <td>{{value.paperFounder}}</td>
                            <td>{{value.paperBirth}}</td>
                            <td>{{value.paperSchool}}</td>
                            <td>
                                <a>查看</a>
                                <a :href="'generatePaper.html?paperId=' + value.paperId">编辑</a>
                                <a>删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <a style="float: right;margin: 40px;" class="btn btn-primary" data-dismiss="modal"
                   href="frontGenerate.html">新建试卷
                </a>
            </div>
        </div>
    </div>
</div>
<script>
    var paperList = new Vue({
        el: '#paperList',
        data: {
            subject: '1',
            listPaper: [],
        },
        methods: {
            listPapers: function () {
                var url = '/getPaper/paperList/' + this.subject;
                axios.get(url)
                    .then(function (result) {
                        console.log(result);
                        paperList.listPaper = result.data;

                    }).catch(function (error) {
                    console.log(error);
                })
            },

        }
    });
    //日期格式化
    $(function () {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
    });
</script>
</body>
</html>